<template>
  <page-layout>
    <div slot="toolbar">
      <!--<el-button size="small" round type="primary" @click="newChildActivity">新增活动</el-button>-->
    </div>
    <div class="card-header">儿童之家活动管理</div>
    <el-card class="box-card mb20">
      <el-row class="mb20" :gutter="10">
        <el-col :span="6">
            <el-card>
              <el-tree class="m_t_10"
                       :data="departTree"
                       node-key="id"
                       default-expand-all
                       highlight-current
                       ref="tree2"
                       :props="props"
                       :expand-on-click-node="false"
                      @node-click="selectDepart">
                <div class="custom-tree-node" slot-scope="{ node, data }">
                  <span>{{ node.label }}</span>
                </div>
              </el-tree>
            </el-card>
        </el-col>
        <el-col :span="18">
          <el-card class="box-card" v-if="searchChildActivityCondition.childHomeId">
            <el-form ref="searchChildActivityCondition" :model="searchChildActivityCondition" label-width="80px" inline>
              <el-form-item label="标题">
                 <el-input v-model="searchChildActivityCondition.title" style="width: 300px;"/>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search(1)">查询</el-button>
                <el-button type="primary" @click="newChildActivity" v-if="curSelectType.departType==='3'">新增活动</el-button>
              </el-form-item>
            </el-form>

            <el-table
              :data="childActivityList.content" border stripe
              style="width: 100%">
              <el-table-column
                prop="id"
                label="编号"
                width="55">
              </el-table-column>
              <el-table-column
                prop="childHomeName"
                label="所属儿童之家" width="150">
              </el-table-column>
              <el-table-column prop="image" label="图片" width="210">
                <template slot-scope="scope">
                  <image-cover :thumb.sync="scope.row.image" width="187.5px" height="125px" size-type="contain"></image-cover>
                </template>
              </el-table-column>
              <el-table-column prop="title" label="标题" width="120"></el-table-column>
              <el-table-column
                prop="summary"
                label="摘要" >
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button size="mini" type="text"  @click="preChildActivity(scope.row)">
                    预览
                  </el-button>
                  <el-button size="mini" @click="editChildActivity(scope.$index, scope.row)" type="text">编辑</el-button>

                  <el-button size="mini" type="text" @click="deleteChildActivity(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="mt10">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="childActivityList.totalElements"
                :page-size="childActivityList.size"
                :current-page.sync="currentChildActivityPage" @current-change="getPageChange">
              </el-pagination>
            </div>
          </el-card>
          <el-alert
            title="选择要儿童之家"
            type="warning" :closable="false" show-icon v-else>
          </el-alert>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog :visible.sync="showChildActivityEditor" title="添加/编辑 儿童之家活动" width="80%">
      <child-activity-editor @close="onChildActivityEditorClose" :is-close="showChildActivityEditor"></child-activity-editor>
    </el-dialog>

    <el-dialog title="预览" :visible.sync="showPreview" width="50%">
        <pre-child-activity @close="onShowPreviewClose" :is-close="showPreview"></pre-child-activity>
    </el-dialog>

  </page-layout>
</template>
<script>
import PageLayout from "@/components/page-layout";
import ChildActivityEditor from "./child-activity-editor";
import { mapGetters } from "vuex";
import ImageCover from "@/components/image-cover";
import PreChildActivity from "./pre-childActivity";
export default {
  created() {},
  mounted() {
    var para = { parentId: this.adminInfo.depart.id, type: "3" };
    this.$store.dispatch("getDepartTree", para).then(ret => {});
  },
  data() {
    return {
      currentChildActivityPage: 1,
      showChildActivityEditor: false,
      showPreview: false,
      props: {
        label: "departName",
        children: "children"
      },
      curSelectType: {}
    };
  },
  computed: {
    ...mapGetters({
      childActivityList: "childActivityList",
      searchChildActivityCondition: "searchChildActivityCondition",
      adminInfo: "adminInfo",
      departTree: "departTree"
    })
  },
  methods: {
    selectDepart(val) {
      console.log(val);
      this.curSelectType = val;
      this.searchChildActivityCondition.childHomeId = val.id;
      this.getPageChange(1);
    },
    getPageChange(val) {
      var tem = Object.assign(
        { pageIndex: val - 1 },
        this.searchChildActivityCondition
      );
      this.$store.dispatch("getChildActivityPageS", tem).then(ret => {});
    },
    refresh() {
      this.getPageChange(1);
    },
    deleteChildActivity(row) {
      this.$confirm("确认删除当前儿童之家活动?", "提示", {})
        .then(() => {
          this.$store
            .dispatch("deleteChildActivityS", { id: row.id })
            .then(ret => {
              this.refresh();
              this.$notify({
                title: "删除成功",
                type: "success"
              });
            });
        })
        .catch(() => {});
    },
    preChildActivity(row) {
      this.$store.dispatch("getChildActivityS", row.id);
      this.showPreview = true;
    },
    newChildActivity() {
      var tem = {
        childHomeId: this.curSelectType.id,
        childHomeName: this.curSelectType.departName
      };
      this.$store.commit("INIT_CURRENT_CHILDACTIVITY", tem);
      this.showChildActivityEditor = true;
    },
    editChildActivity(index, row) {
      this.$store.dispatch("getChildActivityS", row.id);
      this.showChildActivityEditor = true;
    },
    getChildHome(val) {
      this.$store.dispatch("getChildHomeS", val).then(ret => {
        return ret.data.data.name;
      });
    },
    onChildActivityEditorClose() {
      this.showChildActivityEditor = false;
      this.refresh();
    },
    onShowPreviewClose() {
      this.showPreview = false;
    }
  },
  components: {
    PageLayout,
    ChildActivityEditor,
    ImageCover,
    PreChildActivity
  }
};
</script>
<style>
</style>
